<template>
   <!-- <div class="body" style="height: 100vh">
        <el-scrollbar style="height: 100%">
            <headerNav :title="title" :iccid="iccid" :openid="openid"></headerNav>
            &lt;!&ndash;<el-card shadow="always" icon="point-gift-o" >
                充值缴费
            </el-card>&ndash;&gt;
            <div style="width: 100%;margin-left: 2%;margin-top:3%;line-height: 15px">
                <span style="color: white;font-size: 18px">充值中心</span>
                <p style="color: rgb(232, 221, 221);font-size: 15px">默认号码</p>
                <span style="color: white;font-size: 14px">{{iccid}}</span>
            </div>

            <el-card style="background-color: white;
                    width: 95%;height: 28%;
                    text-align:center;margin:2% auto;border-radius: 12px">
                <div style="width: 100%;height: 100%;">
                    <van-grid  style="margin-top: 3%;width:100%" gutter="8" :column-num="3">
                        <van-grid-item
                                @click.native="clickGrid(value)"
                                v-for="(value,index) in balances"
                                :key="index"
                        >
                            <template slot="text">
                                <span style="font-size: 18px;color: #4768f3">{{value}}元</span>
                                <p style="font-size: 17px;color: darkgoldenrod">售价{{value}}元</p>
                            </template>
                        </van-grid-item>
                        <van-grid-item
                                @click.native="clickGrid(value)"
                                class="cla_active"
                        >
                            <template #icon >
                                <van-icon style="margin-top: -50%" size="1.8rem" color="#985f0d" name="gold-coin-o"></van-icon>
                            </template>
                            <template #text>
                                <span style="font-size: 17px;color: #985f0d">自定义价格</span>
                            </template>
                        </van-grid-item>
                    </van-grid>
                    <div style="height: 3rem"></div>
                </div>
                <van-dialog :before-close="clickDialog" v-model="diyBanlaceShow" title="价格" show-cancel-button>
                    <van-field placeholder="请输入1~10000000的数字" maxlength="8" type="number" v-model="diyBalance"/>
                </van-dialog>
            </el-card>
        </el-scrollbar>
        <rightBottom v-bind:iccid="iccid" v-bind:openid="openid"></rightBottom>
        <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />

    </div>-->
</template>

<script>
    import headerNav from "../../../components/headerNav";
    import footerNav from "../../../components/footerNav";
    import rightBottom from "../../../components/rightBottom";
    import weixinPay from "../../../static/js/weixinPay";
    import tools from "../../../utils/tools";

    export default {
        name: "pay_balance",
        components:{
            "headerNav":headerNav,
            "footerNav":footerNav,
            "rightBottom":rightBottom
        },
        mounted() {
            let _this=this
            _this.iccid=_this.$route.params.iccid
            if(_this.$check.checkIsNull(_this.iccid)){
                _this.iccid =_this.$store.state.iccid
            }
            _this.openid=_this.$store.state.openid
            _this.loadBalance()
            _this.appId =_this.$store.state.appid

        },
        data(){
            return{
                isActive:false,
                title:'充值余额',
                price:0.01,
                priceStr:'',
                iccid:"",
                openid:"",
                active:false,
                diyBalance:"",
                diyBanlaceShow:false,
                balances:[20,50,100,150,200,500,1000,1500],
                appId:'wxb9c885c722d8cd36',

            }
        },
        methods:{
           loadBalance(){
                let _this=this
                _this.$ajax.get(process.env.VUE_APP_SERVER+"/web/qu-diy-bal/"+_this.iccid)
               .then(res=>{
                   if(res.data.code==="0"){
                       let data =res.data.data
                       _this.balances=data.split(",")
                   }
               })
            },
            onSubmit(){
                let _this=this
                if(_this.price===0.01){
                    _this.$toast.fail("请先选择充值规格")
                    return false
                }
            let map = {
                "iccid":_this.iccid,
                "body":"add-balance",
                "price":_this.priceStr,
                "openid":_this.openid,
                "appId":_this.appId
            };
                let encrypt_text = tools.encrypt(JSON.stringify(map));
               // encrypt_text = JSON.stringify(encrypt_text);

                _this.$ajax.post(process.env.VUE_APP_SERVER+"/web/weixin/pay/weixinPay",encrypt_text).then(res=>{
                    if(res.data.code==="0"){
                        weixinPay(res.data).then(res=>{
                            alert("success")
                        }).catch(err=>{
                            alert("error"+err)
                        })
                    }else{
                        _this.$toast.fail(res.data.msg)
                    }
                }).catch(err=>{
                    _this.$toast.fail(err)
                })
            },
            clickDialog(action,done){
                let _this=this
                if(action==="confirm"){
                    if(parseFloat(_this.diyBalance)<10.00){
                        _this.$toast.fail("自定义价格不能低于10元")
                        setTimeout(done(),2000)
                        return false
                    }
                    if(!_this.$check.checkNumber(_this.diyBalance)||_this.$check.checkIsNull(_this.diyBalance) ){
                        _this.$toast.fail("请输入1-1000的整数")
                        setTimeout(done(),2000)
                        return false
                    }
                    //得到充值价格
                    _this.price=parseFloat(_this.diyBalance)*100
                    _this.priceStr =parseFloat(_this.price/100).toString()
                    done()
                }else if(action==="cancel"){
                    done()
                }
            },
            clickGrid(value){
                let _this=this
                let price=value
                if(_this.$check.checkIsNull(value)){
                    _this.diyBanlaceShow=true
                }else{
                    _this.diyBanlaceShow=false
                    //后台价格传递给后台
                    _this.price=parseFloat(value)*100
                    _this.priceStr =parseFloat(_this.price/100).toString()
                }
            }
        }
    }
</script>

<style scoped>
    .body{
        width: 100%;
        height: 100%;
        background-image: url("../../../static/img/index.jpg");
        background-size: 100% 100%;
        position: fixed;
    }
     .van-grid-item__content{
        background-color: rgba(227, 214, 223, 0.1);
    }
    .van-grid-item__content:hover{
        border:1px solid #4768f3;
    }

</style>